const paths = require('./paths');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const babelConfig = require('./babel.config');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { cssLoaderRule, postCssLoaderRule } = require('./rules');

module.exports = {
  entry: paths.entry,
  mode: 'development',
  output: {
    path: paths.output,
    filename: '[name][hash].js',
    clean: true, //每次打包前清空目录
  },
  devServer: {
    port: 3000, // 端口
    open: true, // 自动打开
    compress: true, //启用gzip压缩
    client: {
      progress: true, // 浏览器打印进度
    },
    historyApiFallback: true,
  },
  module: {
    rules: [
      {
        test: /\.(js|mjs|jsx|ts|tsx)$/,
        loader: require.resolve('babel-loader'),
        exclude: /node_modules/,
        options: {
          presets: babelConfig.presets,
        },
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, { ...cssLoaderRule }, { ...postCssLoaderRule }],
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        include: /node_modules/,
        use: [
          'style-loader',
          "css-loader"
        ]
      },
      {
        test: /\.less$/,
        exclude: /node_modules/,
        use: [
          MiniCssExtractPlugin.loader,
          { ...cssLoaderRule },
          { ...postCssLoaderRule },
          'less-loader',
        ],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 1 * 1024, // 1kb以下小文件打入js中
          },
        },
        generator: {
          filename: 'static/[hash][ext][query]',
        },
      },
    ],
  },
  resolve: {
    extensions: ['.js', '.jsx', '.ts', '.tsx'],
    alias: {
      "@":paths.appSrc
    }
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: paths.html,
      filename: 'index.html',
      favicon: paths.favicon
    }),
    new MiniCssExtractPlugin({
      filename: '[name].[hash].css', // 生成hash名称
    }),
  ],
};
